import React, {Component} from 'react';
import {Route} from 'react-router-dom';
import MyNavLink from "../components/my-nav-link";
import MessageDetail from './message-detail';


export default class Message extends Component {
    state =
        {
            messages: []
        }

    componentDidMount() {
        // 模拟发送ajax请求异步数据
        setTimeout(() => {
            // 数据
            const messages = [
                {id: 1, title: 'message001'},
                {id: 3, title: 'message003'},
                {id: 5, title: 'message005'}
            ];
            // 更新状态
            this.setState({messages})
        }, 100)

    }

    showDetail = (id) => {
        this.props.history.push(`/home/message/messagedetail/${id}`);
    }
    showDetail2 = (id) => {
        this.props.history.replace(`/home/message/messagedetail/${id}`);
    }
    back = () => {
        this.props.history.goBack();
    }
    forward = () => {
        this.props.history.goForward();
    }


    render() {
        return (
            <div>
                <ul>
                    {this.state.messages.map((value, index) => (
                        <li key={index}>
                            {/*<a href=></a>*/}
                            <MyNavLink to={`/home/message/messagedetail/${value.id}`}>{value.title}</MyNavLink>
                            &nbsp;&nbsp;
                            {/*<button onClick={this.showDetail}></button>
                            提供一个函数，默认是dom会回调这个函数并传递event对象
                            如果我们想在调用的时候传递参数（或者直接执行js代码）可以使用箭头函数
                            */}
                            <button onClick={() => this.showDetail(value.id)}>push()查看</button>
                            <button onClick={() => this.showDetail2(value.id)}>replace()查看</button>
                        </li>
                    ))}
                </ul>
                <p>
                    <button onClick={this.back}>回退</button>
                    <button onClick={this.forward}>前进</button>
                </p>
                <p>
                    {/* 通过js进行页面跳转 */}
                    <button onClick={() => window.location = "http://www.baidu.com"}>页面跳转</button>
                </p>
                {/* :id 既是占位符也是标示名称 */}
                <Route path='/home/message/messagedetail/:id' component={MessageDetail}></Route>
            </div>

        );
    }
};